<!DOCTYPE html>
<html>
  <head>
    <!-- Load JQuery and JQuery-UI -->
    <link type="text/css" href="css/hot-sneaks/jquery-ui-1.8.custom.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    
    <!-- Load Processing.js -->
    <script language="javascript" src="js/processing.js"></script>
    <script language="javascript" src="js/init.js"></script>

    <!-- Load DSP.js -->
    <script src="../dsp.js"></script>
    <script>
      $(function() {
        $('#minFreq').slider({ orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 40, slide: changeMinFreq });
        $('#maxFreq').slider({ orientation: 'vertical', range: 'min', min: 10, max: 22000, step: 1, value: 16000, slide: changeMaxFreq });
        $('#bandsPerOctave').slider({ orientation: 'vertical', range: 'min', min: 0.1, max: 2, step: 0.1, value: 1, slide: changeBandsPerOctave });
	      $('#input').attr('volume', 0);
        var input = document.getElementById('input');
        input.addEventListener('MozAudioAvailable', audioWritten, false);
      });
    </script>

    <style type="text/css">
      body, * {
        font-family: Arial, sans-serif;
      }
      .control {
        padding: 5px;
        border: 1px outset #CCC;
        background-color: #EEE;
        float: left;
        margin-right: 5px;
      }
      .control table td {
        padding: 10px;
        width: 20px;
        color: #999;
        font-size: 12px;
      }
      .control h3 {
        margin: 0;
        padding:0;
        font-size: 12px;
        margin-bottom: 10px;
      }
      .control #debug {
        border: 1px inset #ccc;
        background-color: #FFF;
        font-size: 12px;
        width: 300px;
        padding: 10px;
      }
      .slider {
        margin-bottom: 16px;
        width: 8px;
      }

      .ui-button {
        font-size: xx-small;
      }
      
      .ui-slider .ui-slider-handle {
        width: 8px;
        margin-left: 3px;
      }
    </style>
  </head>
  <body>
    <script>
      // Setup shared variables
      var sampleRate = 44100;
      
      var writeCount = 0;

      var signal = new Float32Array(2048);
      var freqz = [0];

      var grapheq;

      var output = new Audio();

      if ( typeof output.mozSetup === 'function' ) {
        output.mozSetup(2, sampleRate);
      }
      
      var changeMinFreq = function() {
         grapheq.setMinimumFrequency($('#minFreq').slider('option', 'value'));
         plotCoeffs();
	 createSliders();
      }

      var changeMaxFreq = function() {
         grapheq.setMaximumFrequency($('#maxFreq').slider('option', 'value'));
         plotCoeffs();
	 createSliders();
      }

      var changeBandsPerOctave = function() {
         grapheq.setBandsPerOctave($('#bandsPerOctave').slider('option', 'value'));
         plotCoeffs();
	 createSliders();
      }

      var createSliders = function() {
	$('#bandSliders').empty();
	for (var i=0; i<grapheq.filters.length; i++) {
	  $('#bandSliders').append('<td><div id="band_'+i+'" class="slider"></div>'+grapheq.filters[i].f0.toFixed(2)+' Hz</td>');
	  $('#band_'+i).slider({ orientation: 'vertical', range: 'min', min: -10, max: 3, step: 0.1, value: 0, slide: changeBandGain });
	}
      }
      
      var changeBandGain = function(event, ui) {
	grapheq.setBandGain(ui.handle.parentNode.id.split("_")[1], ui.value);
        plotCoeffs();
      }

      var plotCoeffs = function() {
	freqz = new Float32Array(grapheq.freqzs[0].length);

	for (var i=0; i<freqz.length; i++) {
	  for (var j=0; j<grapheq.freqzs.length; j++) {
	    freqz[i] += grapheq.freqzs[j][i];
	  }
	}
      }

      function audioWritten(event) {
        signal = event.frameBuffer;

        // Apply the filter to the signal
        signal = grapheq.processStereo(signal);

        output.mozWriteAudio([]); // flush
        output.mozWriteAudio(signal);
        writeCount++;
      }
    </script>
    
    <script type="application/processing" target="#signal">
	// Draw axes
	float yMin = -60;
	float yMax = 12;
	float yCenter = 0;
	
	float xMin = 0;
	float xMax = PI;
	float xCenter = 0;

      void setup() {
        size(700, 200);
        grapheq = new GraphicalEq(sampleRate);
        grapheq.recalculateFilters();
        plotCoeffs();
	createSliders();
        
        stroke(255);
        strokeWeight(1);
        frameRate(20);
      }
      
      void draw() {
        background(255);
	
	noFill();
	stroke(127);
	rect(0, 0, width, height);
      
	stroke(0);
	line(map(xCenter, xMin, xMax, 0, width), map(yMin, yMin, yMax, height, 0), map(xCenter, xMin, xMax, 0, width), map(yMax, yMin, yMax, height, 0)); 
	line(map(xMin, xMin, xMax, 0, width), map(yCenter, yMin, yMax, height, 0), map(xMax, xMin, xMax, 0, width), map(yCenter, yMin, yMax, height, 0)); 
      
	// Draw the response
	noFill();
	stroke(10, 40, 200);
	beginShape();
        for (int i = 0; i < freqz.length; i++) {
          vertex(map(i, 0, freqz.length, 0, width), map(freqz[i], yMin, yMax, height, 0));
        }
	endShape();
      }

    </script>
    
    <h1>Graphical Equalizer</h1>
    <h3>by <a href="http://www.ricardmarxer.com/blog">Ricard Marxer</a></h3>
    <p>You will need a recent build of Mozilla Firefox with the Audio API to hear the filtered version.</p>
    <audio id='input' style="float: left; height:70px; width: 100%" tabindex="0" src="audio/corban-peddle.ogg" controls="true"></audio></br>
    <p></br></br></p>    
    <div style="width: 100%;">
      <div><canvas id="signal" width="50%" height="200px" style="float: left;"></canvas></div>
      
      <div class="control" style="float: right; height: 200px">
        <h3>Graphical Equalizer</h3>
        <table>
          <tr>
            <td><div id="minFreq" class="slider"></div>Min Freq</td>
            <td><div id="maxFreq" class="slider"></div>Max Freq</td>
            <td><div id="bandsPerOctave" class="slider"></div>BPO</td>
          </tr>
        </table>
      </div>
    </div>

    <p></br></br></br></p>    

   <div class="control" style="width: 100%; float: left;">
    <table> 
     <tr id="bandSliders">
     </tr>
    </table>
  </div>
  </body>
</html>
